<template>
  <DynamicList ref="roleListTable" v-bind="userListColumns" @load-data="getPermissionTree">
    <template #tableTop>
      <a-space class="flex-wrap" size="small">
        <a-button
          v-if="$auth('system-permission-add')"
          type="primary"
          @click="router.push('/system/permission/permissionDetail')"
        >
          <PlusOutlined /> 新增
        </a-button>
      </a-space>
    </template>
  </DynamicList>
</template>

<script setup lang="tsx">
  import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import DynamicList from '@/components/dynamicList/index.vue';
  import { deletePermission, getSysPermissionTree } from '@/api/system/permission';
  import { verifyAuth } from '@/core/permission';

  defineOptions({
    name: 'permissionList',
  });
  const roleListTable = ref<any>(null);
  const router = useRouter();
  const list = ref<any[]>([]);

  const getPermissionTree = async () => {
    const data = await getSysPermissionTree();
    if (data) {
      list.value = data;
    } else {
      list.value = [];
    }
  };

  const userListColumns = ref({
    columns: [
      {
        title: '菜单名称',
        width: 200,
        align: 'center',
        dataIndex: 'title',
      },
      {
        title: '类型',
        width: 200,
        align: 'center',
        dataIndex: 'type',
        customRender: (text) => {
          switch (text.value) {
            case 1:
              return '目录';
            case 2:
              return '菜单';
            case 3:
              return '权限';
            default:
              return '-';
          }
        },
      },
      {
        title: 'key',
        width: 200,
        align: 'center',
        dataIndex: 'key',
      },
      {
        title: '路径',
        width: 200,
        align: 'center',
        dataIndex: 'path',
      },
      {
        title: '组件名',
        width: 200,
        align: 'center',
        dataIndex: 'component',
      },
      {
        title: '状态',
        width: 120,
        align: 'center',
        dataIndex: 'hidden',
        customRender: (text) => {
          return text.value ? '隐藏' : '显示';
        },
      },
      {
        title: '排序',
        width: 80,
        align: 'center',
        dataIndex: 'sort',
      },
      {
        title: '操作',
        width: 350,
        dataIndex: 'operation',
        align: 'center',
        fixed: 'right',
        actions: [
          {
            title: '编辑',
            vIf: verifyAuth('system-permission-update'),
            onClick: (record) => {
              router.push(`/system/permission/permissionDetail?id=${record.id}`);
            },
          },
          {
            title: '添加下级',
            vIf: verifyAuth('system-permission-update'),
            onClick: (record) => {
              router.push(`/system/permission/permissionDetail?parentId=${record.id}`);
            },
          },
          {
            title: '删除',
            vIf: verifyAuth('system-permission-delete'),
            onClick: (record) => {
              deleteConfirmPermission(record);
            },
          },
        ],
      },
    ],
    columnProps: {},
    list,
  });

  const deleteConfirmPermission = async (record) => {
    Modal.confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      centered: true,
      onOk: async () => {
        const res = await deletePermission({ id: record.id });
        if (res) {
          message.success(res?.msg);
          roleListTable.value && roleListTable.value.resetFields();
        }
      },
    });
  };

  onMounted(async () => await getPermissionTree());
</script>

<style></style>
